$(function () { // 页面加载事件
    // 通过cookie获取用户名
    let username = getCookie('username');
    if (!username) { // 未登录
        let index = layer.msg('请先登录', {
            shade: [.7, '#666']
        });
        setTimeout(() => {
            layer.close(index);
            location.href = './01-login.html';
        }, 1500);
    }

    // 用户已经登录
    // 获取购物车的数据
    let cartData = localStorage.getItem('data');
    if (!cartData) {
        $('#cart').css('display', 'none')
        $('#cartEmpty').html(`<div style="padding-left:10px;" class="jumbotron">
        <h1>购物车空空如也!</h1>
        <p>赶快去列表页挑选商品吧</p>
        <p><a class="btn btn-primary btn-lg" href="index.html" role="button">去列表页</a></p>
        </div>`);
    } else {
        // 判断本地购物车中是否有用户的数据
        let cartArr = JSON.parse(cartData);
        // 取出用户在购物车中的商品id
        let goodsIds = cartArr.map(v => {
            if (v.username === username) {
                return v.goodsId;
            }
        })


        // 去除goodsIds中的undefined
        let gids = goodsIds.filter(v => v !== undefined);
        // 判断gids是否是空数组
        if (gids.length === 0) {
            console.log(123);
            $('#cart').css('display', 'none')
            $('#cartEmpty').html(`<div style="padding-left:10px;" class="jumbotron">
                                    <h1>购物车空空如也!</h1>
                                    <p>赶快去列表页挑选商品吧</p>
                                    <p><a class="btn btn-primary btn-lg" href="index.html" role="button">去列表页</a></p>
                                </div>`);
        } else {
            // 当购物车为空时，隐藏table,当其不为空时，显示table; 
            $('#cart').css('display', 'block')
            // 如果gids数组有商品数据，则将该数组转为字符串,然后获取商品数据
            let ids = gids.join(',');
            getCart();
            async function getCart() {
                let {
                    data
                } = await pAjax({
                    url: '../server/cart.php',
                    data: {
                        ids
                    },
                    dataType: 'json'
                })
                // 根据数据渲染页面
                let str = '';
                data.forEach(v => {
                    let nums = cartArr.find(item => item.username === username && item.goodsId === v.id).num; // 获取到购物车的对应商品数量
                    str += `
                    <tr>
                            <td class="checkbox" style="border: 0">
                                <input class="check-one checkeds" type="checkbox" name="checkOne">
                            </td>
                            <td class="goods">
                                <img src="${v.imgpath}"  alt="" />
                                <span>${v.name}</span>
                            </td>
                            <td class="price">￥<span>${v.price}</span></td>
                            <!--将商品的id和对应商品的购物数量记录在td标签中 -->    
                            <td class="count" data-stock="${v.stock}" data-id="${v.id}">
                                <span class="reduce">-</span>
                                <input class="count-input" type="text" value="${nums}" />
                                <span class="add">+</span>
                            </td>
                            <td class="subtotal">￥<span>${v.price * nums}</span>.00</td>
                            <td class="operation">
                                <span class="delete">删除</span>
                            </td>
                    </tr> `;
                });
                $('tbody').html(str);
                // 调用全选，单选函数
                select();
                // 调用加减按钮的点击事件绑定
                addAndRdeuce()
                // 调用移除事件绑定
                remove();
                //调用支付结算
                payment()
            }
        }
    }

    // 全选单选
    function select() {
        // 全选点击事件
        $('.check').click(function () {
            $('.check').prop('checked', $(this).prop('checked'));
            $('input[name=checkOne]').prop('checked', $(this).prop('checked'));
            total();
        });
        // 单选事件
        $('input[name=checkOne]').click(function () {
            // 将jq集合对象转为原生的数组
            let inps = Array.prototype.slice.call($('input[name=checkOne]'));
            // 判断单选元素数组是否每一个都是选中的
            let flag = inps.every(v => $(v).prop('checked'));
            $('.check').prop('checked', flag);
            total();
        })
    }
   // 计算商品总数和商品总价
    function total() {
        let totalNum = 0; // 商品总数
        let totalPrice = 0; // 商品总价
        $('input[name=checkOne]').each((i, v) => {
            // 判断是否勾选上
            if ($(v).prop('checked')) {
                // 累加商品总数和总价
                totalNum += $(v).parent().parent().find('.count').find('.count-input').val() - 0;
                totalPrice += $(v).parent().parent().find('.subtotal').find('span').text() - 0;
            }
        });
        // 渲染总价和总数
        $('#selectedTotal').text(totalNum);
        $('#priceTotal').text(totalPrice);
    }

    // 实现点击数量加减()
    function addAndRdeuce() {
        // 加绑定点击事件
        $('.add').click(function (){
            $('.reduce').prop('disabled', false);
            let num = $(this).prev().val() - 0;
            let stock = $(this).parent()[0].dataset.stock;
            //修改小计
            let res=`${num * parseInt($(this).parent().prev().find('span').text())}`
            $(this).parent().next().find('span').text(res)
            if (num == stock) {
                $(this).prev().val(stock);
                layer.msg('超出库存');
                $(this).prop('disabled', true);
            } else {
                $(this).prev().val(++num);
            }       
            // 修改本地购物车中的数量
            let goodsId = $(this).parent()[0].dataset.id;
            let data = JSON.parse(localStorage.getItem('data'));
            let cartGoods = data.find(v => v.username === username && v.goodsId === goodsId);
            cartGoods.num = num;
            // 将修改后的data写入本地购物车
            localStorage.setItem('data', JSON.stringify(data));
        })
        // 减绑定点击事件
        $('.reduce').click(function () {
            $('.add').prop('disabled', false);
            let num = $(this).next().val() - 0;
            if (num <= 1) {
                $(this).next().val(1);
                layer.msg('最少1个');
                $(this).prop('disabled', true);
            } else {
                $(this).next().val(--num);
            }
           //修改小计
           let res=`${num * parseInt($(this).parent().prev().find('span').text())}`
           $(this).parent().next().find('span').text(res)
            // 修改本地购物车中的数量
            let goodsId = $(this).parent()[0].dataset.id;
            let data = JSON.parse(localStorage.getItem('data'));
            let cartGoods = data.find(v => v.username === username && v.goodsId === goodsId);
            cartGoods.num = num;
            // 将修改后的data写入本地购物车
            localStorage.setItem('data', JSON.stringify(data))  
        })
    }
 
    // 点击移除 
    function remove() {
        $('.delete').click(function () {
            // 弹出层
            layer.confirm('你真的要移除吗？', ['确定', '取消'], () => {
                // 点击确定
                // 移除当前这个点击td对应的tr
                $(this).parent().parent().remove();
                // 获取本地购物车数据
                let goodsId = $(this).parent().parent().find('.count')[0].dataset.id;
                let data = JSON.parse(localStorage.getItem('data'));
                console.log(goodsId, data);

                let dataArr = data.filter(v => {
                    return !(v.username === username && v.goodsId === goodsId)
                })
                // 写入购物车
                localStorage.setItem('data', JSON.stringify(dataArr));
                // 判断用户购物车中的数据是否为空
                let index = dataArr.findIndex(v => v.username === username);
                if (index == -1) {
                    location.reload(); // 重新加载页面
                } else {
                    layer.msg('移除成功', { time: 1000 });
                }

            }, function () {
                // 点击取消
                layer.msg('已取消', { time: 1000 });
            })
        })
    }
    function  payment(){
        // 点击支付结算
        $('.closing').click(function() {
             // 弹出层
             layer.confirm('你真的要支付吗？', ['确定', '取消'], () => {
                // 点击确定
                location.href='./05-buySuccess.html'
                layer.msg('已确认', { time: 1000 });
            }, function () {
                // 点击取消
                layer.msg('已取消', { time: 1000 });
            })
        })
    }
})


